﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        .nr > div {
            margin: 15px;
            margin-left: 0px;
        }

        td {
            padding: 5px;
            padding-left: 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职位分类设置--职位分类添加</div>
        <div class="nr">
            <table>
                <tr>
                    <td>职位分类编号： </td>
                    <td><input type="text" v-model="formData.major_kind_id" size="30" readonly :disabled="majorKindOptions.length === 0" /></td>
                </tr>
                <tr>
                    <td>职位分类名称： </td>
                    <td>
                        <el-select v-model="formData.major_name"
                                   placeholder="请选择职位分类"
                                   size="large"
                                   style="width: 267px"
                                   :loading="loadingMajorKind"
                        v-on:change ="onMajorKindChange">
                            <el-option v-for="item in majorKindOptions"
                                       :key="item.major_id"
                                       :label="item.major_name"
                                       :value="item.major_name" />
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>职位编号： </td>
                    <td><input type="text" v-model="formData.major_id" size="30" readonly :disabled="majorKindOptions2.length === 0" /></td>
                </tr>
                <tr>
                    <td>职位名称： </td>
                    <td>
                        <el-select v-model="formData.major_kind_name"
                                   placeholder="请选择职位"
                                   size="large"
                                   style="width: 267px"
                        v-on:change ="onMajorNameChange">
                            <el-option v-for="item in majorKindOptions2"
                                       :key="item.mfk_id"
                                       :label="item.major_kind_name"
                                       :value="item.major_kind_name" />
                        </el-select>
                    </td>
                </tr>
            </table>
            <div>
                <el-button type="primary" v-on:click ="submitForm">添加</el-button>
                <el-button type="primary" v-on:click ="Ret">返回</el-button>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;

        const app = createApp({
          setup() {
             // 表单数据
             const formData = ref({
                major_kind_id: '',
                major_kind_name: '',
                major_id: '',
                major_name: '',
             });

             const loadingMajorKind = ref(false);
             const majorKindOptions = ref([]);
             const majorKindOptions2 = ref([]);


             // 获取职位分类数据
             const fetchMajorKindData = async () => {
                loadingMajorKind.value = true;
                try {
                    const response = await axios.get('/ZWSZ/select1');
                    if (response.data.list && response.data.list.length > 0) {
                        majorKindOptions.value = response.data.list.map(item => ({
                            major_id: item.major_id,
                            major_name: item.major_name
                        }));
                    }
                } catch (error) {
                    console.error('获取职位分类数据失败:', error);
                    ElementPlus.ElMessage.error('获取职位分类数据失败，请重试');
                } finally {
                    loadingMajorKind.value = false;
                }
             };


              // 获取职位数据
             const fetchMajorKindData2 = async () => {
                loadingMajorKind.value = true;
                try {
                    const response = await axios.get('/ZWSZ/select2');
                    console.log(response.data.list);
                    if (response.data.list && response.data.list.length > 0) {
                        majorKindOptions2.value = response.data.list.map(item => ({
                            mfk_id: item.mfk_id, // 修正：原代码中使用了错误的fmk_id
                            major_kind_name: item.major_kind_name,
                            major_id: item.major_id // 假设返回的数据中包含职位编号
                        }));
                    }
                } catch (error) {
                    console.error('获取职位数据失败:', error);
                    ElementPlus.ElMessage.error('获取职位数据失败，请重试');
                } finally {
                    loadingMajorKind.value = false;
                }
             };

             // 职位分类名称变更时更新编号
             const onMajorKindChange = (value) => {
                if (!value) {
                    formData.value.major_kind_id = '';
                    return;
                }

                // 查找选中项对应的编号
                const selectedItem = majorKindOptions.value.find(item => item.major_name === value);
                if (selectedItem) {
                    formData.value.major_kind_id = selectedItem.major_id;
                } else {
                    formData.value.major_kind_id = '';
                }
             };

             // 职位名称变更时更新编号
             const onMajorNameChange = (value) => {
                if (!value) {
                    formData.value.major_id = '';
                    return;
                }

                // 查找选中项对应的编号
                const selectedItem = majorKindOptions2.value.find(item => item.major_kind_name === value);
                if (selectedItem) {
                    formData.value.major_id = selectedItem.mfk_id; // 使用实际的职位编号字段
                } else {
                    formData.value.major_id = '';
                }
             };

             // 提交表单
             const submitForm = async () => {
                

                try {
                    console.log(formData.value.major_kind_id+":1")
                    console.log(formData.value)
                    // 发送数据到后端
                    const response = await axios.post('/ZWSZ/AddData',{
                        major_kind_id:formData.value.major_kind_id,
                        major_kind_name:formData.value.major_kind_name,
                        major_id:formData.value.major_id,
                        major_name:formData.value.major_name
                    });

                    if (response.data.success) {
                        ElementPlus.ElMessage.success('添加成功');
                        Ret();
                    } else {
                        ElementPlus.ElMessage.error('添加失败: ' + response.data.message);
                    }
                } catch (error) {
                    console.error('添加职位失败:', error);
                    ElementPlus.ElMessage.error('添加失败，请重试');
                }
             };

             const Ret = () => {
                window.location.href = '/ZWSZ/Fan';
             };

             // 组件挂载后获取数据
             onMounted(() => {
                fetchMajorKindData();
                fetchMajorKindData2();
             });

             return {
                 formData,
                 submitForm,
                 Ret,
                 majorKindOptions,
                 majorKindOptions2,
                 loadingMajorKind,
                 onMajorKindChange,
                 onMajorNameChange
             }
          }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>